<template>
    <div class="container">
      <TManageSidebar />
      <div class="right-content">
        <main class="main">
          <div class="statistics">
            <div class="statistic-item">
              <span>学生人数: {{ studentCount }}</span>
            </div>
            <div class="statistic-item">
              <span>作业份数: {{ assignmentCount }}</span>
            </div>
            <div class="statistic-item">
              <span>互动次数: {{ interactionCount }}</span>
            </div>
            <div class="statistic-item">
              <span>出勤率: {{ attendanceRate }}%</span>
            </div>
          </div>
          <div class="charts">
            <h2>上课出勤率统计</h2>
            <v-chart :option="attendanceChartOption" />
            <h2>作业数据统计</h2>
            <v-chart :option="assignmentChartOption" />
            <h2>AI随练数据统计</h2>
            <v-chart :option="aiChartOption" />
          </div>
        </main>
      </div>
    </div>
  </template>
  
  <script setup>
  import TManageSidebar from '@/components/TManageSidebar.vue';
  import { ref } from 'vue';
  import VChart from 'vue-echarts';
  import { use } from 'echarts/core';
  import { LineChart } from 'echarts/charts';
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
  } from 'echarts/components';
  import { CanvasRenderer } from 'echarts/renderers';

  // 注册必须的组件
  use([
    CanvasRenderer,
    LineChart,
    TitleComponent,
    TooltipComponent,
    GridComponent,
  ]);

  // 模拟数据统计
  const studentCount = ref(99);
  const assignmentCount = ref(2);
  const interactionCount = ref(8);
  const attendanceRate = ref(100);

  // 出勤率图表配置
  const attendanceChartOption = ref({
    title: {
      text: '上课出勤率统计',
      left: 'center',
      top: 0
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['出勤率', '缺勤率'],
      top: 30,
      left: 'center',
      icon: 'line',
      itemWidth: 30,
      itemHeight: 2
    },
    grid: {
      top: 80,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['第一讲', '第二讲', '第三讲', '第四讲', '第五讲']
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 1,
      interval: 0.1,
      splitNumber: 10,
      axisLabel: {
        formatter: '{value * 100}%'
      },
      splitLine: {
        show: true
      }
    },
    series: [
      {
        name: '出勤率',
        data: [0.95, 0.92, 0.88, 0.96, 0.93],
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          color: '#409EFF',
          width: 2
        }
      },
      {
        name: '缺勤率',
        data: [0.05, 0.08, 0.12, 0.04, 0.07],
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          color: '#F56C6C',
          width: 2
        }
      }
    ]
  });

  // 作业数据图表配置
  const assignmentChartOption = ref({
    title: {
      text: '作业数据统计',
      left: 'center',
      top: 0
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['提交量', '平均分'],
      top: 30,
      left: 'center',
      icon: 'line',
      itemWidth: 30,
      itemHeight: 2
    },
    grid: {
      top: 80,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['第一讲', '第二讲', '第三讲', '第四讲', '第五讲']
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 1,
      interval: 0.1,
      splitNumber: 10,
      axisLabel: {
        formatter: '{value * 100}%'
      },
      splitLine: {
        show: true
      }
    },
    series: [
      {
        name: '提交量',
        data: [0.85, 0.88, 0.92, 0.90, 0.95],
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          color: '#67C23A',
          width: 2
        }
      },
      {
        name: '平均分',
        data: [0.75, 0.82, 0.79, 0.85, 0.88],
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          color: '#E6A23C',
          width: 2
        }
      }
    ]
  });

  // AI随练数据图表配置
  const aiChartOption = ref({
    title: {
      text: 'AI随练数据统计',
      left: 'center',
      top: 0
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['题目数', '平均分'],
      top: 30,
      left: 'center',
      icon: 'line',
      itemWidth: 30,
      itemHeight: 2
    },
    grid: {
      top: 80,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['第一讲', '第二讲', '第三讲', '第四讲', '第五讲']
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 1,
      interval: 0.1,
      splitNumber: 10,
      axisLabel: {
        formatter: '{value * 100}%'
      },
      splitLine: {
        show: true
      }
    },
    series: [
      {
        name: '题目数',
        data: [0.65, 0.75, 0.80, 0.85, 0.90],
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          color: '#F56C6C',
          width: 2
        }
      },
      {
        name: '平均分',
        data: [0.60, 0.70, 0.75, 0.82, 0.85],
        type: 'line',
        smooth: true,
        symbol: 'none',
        lineStyle: {
          color: '#909399',
          width: 2
        }
      }
    ]
  });
  </script>
  
  <style scoped>
  .container {
    display: flex;
    min-height: 100vh;
  }
  
  .right-content {
    margin-left: 160px; /* 与侧边栏宽度相同 */
    flex: 1;
  }

  .statistics {
    margin: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-around;
  }

  .statistic-item {
    text-align: center;
    padding: 20px;
  }

  .statistic-item span {
    font-size: 20px;
    color: #303133;
  }

  .charts {
    margin: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .charts :deep(.echarts) {
    height: 300px;
    margin: 20px 0;
  }

  h2 {
    margin-top: 20px;
  }
  </style>